<template>
  <div class="home-page h-full">
    <div class="home-header">
      <div class="left-img">
        {{ headerText }}
      </div>
      <div class="personal-setting">
        <div class="right-personal-detail">
          <personal-setting class="setting" :type="'homeHF'"></personal-setting>
        </div>
      </div>
    </div>
    <div class="main-content">
      <div class="left-content">
        <div class="top-detail-content">
          <div class="little-title">
            <i class="icon iconfont icon-a-juxingfuzhi12beifen2"></i>
            <div class="block-title">
              用途管制场景
            </div>
          </div>
          <div class="bottom-detail-content">
            <div class="project-item">
              <div class="item" @click="goto('swxz')">
                <img src="@/assets/img/home/kjzr.png"  alt=""/>
              </div>
              <div class="bottom-tip">空间准入</div>
            </div>
            <div class="project-item">
              <div class="item" @click="goto('none')" >
                <img src="@/assets/img/home/kjzr.png"  alt=""/>
              </div>
              <div class="bottom-tip">用途转用</div>
            </div>
            <div class="project-item">
              <a-badge class="p-r-badge" :count="toDoList.total">
                <a href="#" class="head-example" />
              </a-badge>
              <div class="item" @click="goto('xtsp')">
                <img src="@/assets/img/home/kjzr.png"  alt=""/>
              </div>
              <div class="bottom-tip">规划许可</div>
            </div>
            <div class="project-item">
              <div class="item" @click="goto('none')">
                <img src="@/assets/img/home/kjzr.png"  alt=""/>
              </div>
              <div class="bottom-tip">监测评估</div>
            </div>
            <div class="project-item">
              <div class="item" @click="goto('none')">
                <img src="@/assets/img/home/kjzr.png"  alt=""/>
              </div>
              <div class="bottom-tip">要素账簿</div>
            </div>
            <div class="project-item">
              <div class="item" @click="goto('none')">
                <img src="@/assets/img/home/kjzr.png"  alt=""/>
              </div>
              <div class="bottom-tip">项目攻坚</div>
            </div>
            <div class="project-item">
              <div class="item" @click="goto('none')">
                <img src="@/assets/img/home/kjzr.png"  alt=""/>
              </div>
              <div class="bottom-tip">统计分析</div>
            </div>
          </div>
        </div>
        <div class="middle-title">
          <div class="left-title-item">
            <div class="yj-title qiehuan" @click="toChangeItem('yj')" :class="{'select-active': changeItem == 'yj'}">
              预警({{ warnList.total }})
            </div>
            <div class="db-title qiehuan" @click="toChangeItem('daiban')" :class="{'select-active': changeItem == 'daiban'}">
              待办({{ toDoList.total }})
            </div>
            <div class="dub-title qiehuan" @click="toChangeItem('duban')" :class="{'select-active': changeItem == 'duban'}">
              督办({{ superviseList.total }})
            </div>
          </div>
          <div class="right-shuaxin">
            <i class="icon iconfont icon-shuaxin"></i>
            刷新
          </div>
        </div>
        <div class="bottom-content" v-if="changeItem=='yj'">
          <div class="top-tip">
            <span class="left-tip">
              你有{{ warnList.total }}条待阅需要处理
            </span>
            <span class="right-ckgd" @click="goToBox('在办箱')">
              查看更多>>
            </span>
          </div>
          <div class="mian-full-content">
            <div class="left-main-content" :key="index" v-for="(item, index) in warnList.rows">
              <div class="title-content" @click="jumpDetail(item,'在办箱')">
                <div class="top">
                  <span :title="item.businessName" class="top-left">{{ item.businessName }}</span>
                  <span class="top-right" :class="getWarnBoxClass(item.warnState)">{{ item.warnState }}</span>
                </div>
                <div :title="item.projectName" class="title-header">{{ item.projectName }}</div>
              </div>
              <div class="detail-time time">{{ item.receiveDate }}</div>
              <div class="middle-js time"><div></div>{{ item.activityName }}</div>
              <div class="bottom-yqsj time">
                <div></div>
                <span v-if="item.bizTimeLimit">时间要求{{ item.bizTimeLimit }}天</span>
                <span v-else>不计时</span>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom-content" v-else-if="changeItem=='daiban'">
          <div class="top-tip">
            <span class="left-tip">
              你有{{ toDoList.total }}条待阅需要处理
            </span>
            <span class="right-ckgd" @click="goToBox('在办箱')">
              查看更多>>
            </span>
          </div>
          <div class="mian-full-content">
            <div class="left-main-content" :key="index" v-for="(item, index) in toDoList.rows">
              <div class="title-content" @click="jumpDetail(item,'在办箱')">
                <div class="top">
                  <span :title="item.businessName" class="top-left">{{ item.businessName }}</span>
                  <span class="top-right" :class="getWarnBoxClass(item.warnState)">{{ item.warnState }}</span>
                </div>
                <div :title="item.projectName" class="title-header">{{ item.projectName }}</div>
              </div>
              <div class="detail-time time">{{ item.receiveDate }}</div>
              <div class="middle-js time"><div></div>{{ item.activityName }}</div>
              <div class="bottom-yqsj time">
                <div></div>
                <span v-if="item.bizTimeLimit">时间要求{{ item.bizTimeLimit }}天</span>
                <span v-else>不计时</span>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom-content" v-else>
          <div class="top-tip">
            <span class="left-tip">
              你有{{ superviseList.total }}条待阅需要处理
            </span>
            <span class="right-ckgd" @click="goToBox('督办箱')">
              查看更多>>
            </span>
          </div>
          <div class="mian-full-content">
            <div class="left-main-content" :key="index" v-for="(item, index) in superviseList.rows">
              <div class="title-content" @click="jumpDetail(item,'在办箱')">
                <div class="top">
                  <span :title="item.businessName" class="top-left">{{ item.businessName }}</span>
                  <span class="top-right" :class="getWarnBoxClass(item.warnState)">{{ item.warnState }}</span>
                </div>
                <div :title="item.projectName" class="title-header">{{ item.projectName }}</div>
              </div>
              <div class="detail-time time">{{ item.receiveDate }}</div>
              <div class="middle-js time"><div></div>{{ item.activityName }}</div>
              <div class="bottom-yqsj time">
                <div></div>
                <span v-if="item.bizTimeLimit">时间要求{{ item.bizTimeLimit }}天</span>
                <span v-else>不计时</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="item-content">
          <div class="wdtj-header">
            <i class="icon iconfont icon-a-juxingfuzhi12beifen2"></i>
            <div class="block-title">
              <div class="top">
                <span>通知公告</span>
                <a-button v-if="showGgsz" type="primary" @click="goToBox('待发布')" size="small">公告设置</a-button>
                <span class="right-gdgg" @click="goToBox('已发布')">
                  更多公告&nbsp;>>
                </span>
              </div>
              <span class="right-pager">
                <a-list size="small" item-layout="horizontal" :data-source="noticeList">
                  <a-list-item slot="renderItem" slot-scope="item, index" :title="item.title">
                    <img v-if="item.readCount > 0" src="@/assets/img/home/yue.png">
                    <a-list-item-meta
                      @click="jumpNoticeDetail(item)"
                      :description="`${item.title}`"
                    >
                    </a-list-item-meta>
                  </a-list-item>
                </a-list>
              </span>
            </div>
          </div>
        </div>
        <div class="item-content">
          <div class="zngj-header">
            <i class="icon iconfont icon-a-juxingfuzhi12beifen2"></i>
            <div class="block-title">
              智能工具
            </div>
          </div>
          <div class="zngj-content">
            <div class="zngj-item" v-for="(smartTool, id) in haveSmartToolsList" :key="id" @click="openToools(smartTool)">
              <img :src="require(`../../assets/img/${smartTool.value}.png`)"/>
              <div> {{ smartTool.name }}</div>
            </div>
            <div class="zngj-item" @click="getMoreSmartTool">
              <img src="../../assets/img/gdgj.png"/>
            </div>
          </div>
        </div>
        <div class="item-content">
          <div class="wdgz-header">
            <i class="icon iconfont icon-a-juxingfuzhi12beifen2"></i>
            <div class="block-title">
              我的关注
              <span class="right-gdxm" @click="goToBox('收藏箱')">
                更多项目&nbsp;>>
              </span>
            </div>
          </div>
          <div class="wdgz-content">
            <div
              class="progress-item"
              v-for="(item, index) in collectedProject.rows"
              :key="item.id"
              @click="jumpDetail(item,'收藏箱')"
            >
              <span>【{{ item.businessName }}】</span>{{ item.projectName }}
              <a-progress :percent="30" :steps="5" strokeColor="#58A9FD" :show-info="false"/>
            </div>
          </div>
        </div>
        <div class="item-content">
          <div class="kjtd-header">
            <i class="icon iconfont icon-a-juxingfuzhi12beifen2"></i>
            <div class="block-title">
              快捷通道
            </div>
          </div>
          <div class="kjtd-content">
            <div class="kjtd-item sy" v-for="(pathTool, id) in haveQuickPathList" :key="id" @click="goUrl(pathTool)">
              <img :src="require(`../../assets/img/${pathTool.value}.png`)">
              {{ pathTool.name }}
            </div>
            <div class="kjtd-item ssjd" @click="getMoreQuickPath">
              <img />
            </div>
          </div>
        </div>
      </div>
    </div>
    <a-modal
      title="添加"
      :visible="moretoolVisible"
      @ok="handleOkAddTools()"
      @cancel="handleCancelAdd()"
      width="50%"
      centered>
      <div class="w-full detail-tools">
        <div class="moreToolsContianer" v-for="(smartTool, id) in smartToolsList" :key="id">
          <input
            class="addCheckbox"
            type="checkbox"
            v-model="smartTool.checked"
            :checked="smartTool.state== 0 ? false : true">
          <img :src="require(`../../assets/img/${smartTool.value}.png`)">
          {{ smartTool.name }}
        </div>
      </div>
    </a-modal>
    <a-modal
      title="添加"
      :visible="morepathVisible"
      @ok="handleOkAddPaths()"
      @cancel="handleCancelAddPaths()"
      width="50%"
      centered>
      <div class="w-full detail-tools">
        <div class="moreToolsContianer" v-for="(quickpath, id) in quickPathList" :key="id">
          <input
            class="addCheckbox"
            type="checkbox"
            v-model="quickpath.checked"
            :checked="quickpath.state==0?false:true"
            @change="addModel(id)"></input>
          <img :src="require(`../../assets/img/${quickpath.value}.png`)">
          {{ quickpath.name }}
        </div>
      </div>
    </a-modal>
  </div>

</template>

<script>
import { mapState } from 'vuex'
import PersonalSetting from '@c/Layout/PersonalSetting'
import config from '@/config/defaultSettings'
import homePageService from '@/api/home/homePageService'
import sqlService from '@/api/sqlService'
import { pushByWidgetName } from '@/router/service'
import widgetService from '@/api/widgetService'
import btnEvent from '@/api/btnEvent'
import warn from '@/utils/warning'
import { canvasBg } from '@u/canvasBg'

const relation = {
  // 规划许可: 'ghxk',
  计划指标: 'jhzb',
  空间准入: 'kjzr',
  规划许可: 'xtsp',
  监测监管: 'jcjg',
  一张图: 'yzt',
  综合查询: 'zhcx',
  统计台账: 'tjtz',
  数据上报: 'sjsb',
  项目管理: 'xmgl',
  更多: 'gd',
  三维选址: 'swxz',
  智慧选址: 'zhxz',
  对接管理: 'tzzx'

}
export default {
  name: 'HomeMain1',
  data () {
    return {
      noticeList: [],
      changeItem: 'daiban',
      item: '',
      moretoolVisible: false,
      morepathVisible: false,
      haveSmartToolsList: [],
      haveQuickPathList: [],
      smartToolsList: [],
      quickPathList: [],
      widgets: [],
      toDoList: {
        rows: [],
        total: 0
      },
      warnList: {
        rows: [],
        total: 0
      },
      superviseList: {
        rows: [],
        total: 0
      },
      collectedProject: {
        rows: [],
        total: 0
      },
      searchContent: '',
      direction: 'horizontal',
      current: 3,
      steps: [
        {
          id: 'sdf',
          type: 0,
          info: [{ userName: '选址预审' }]
        },
        {
          id: 'fgh',
          type: 1,
          info: [{ userName: '征地报批' }]
        },
        {
          id: 'wrg',
          type: 2,
          info: [{ userName: '用地许可' }]
        },
        {
          id: 'jhm',
          type: 3,
          info: [{ userName: '工程许可' }]
        },
        {
          id: 'jhm',
          type: 4,
          info: [{ userName: '竣工验收' }]
        }
      ],
      index: 1,
      systemConfig: config,
      handMenuMap: {},
      itemList: [],
      addPathId: '',
      requestAddModel: {
        smartTools: '',
        shortcut: ''
      },
      showGgsz: false,
      headerText: ''
    }
  },
  components: {
    PersonalSetting
  },
  created () {
    this.createHandMenuMap()
  },
  mounted () {
    this.headerText = window.config.VUE_APP_SYSTEM_TITLE
    Object.keys(this.menuMap).map(key => {
      this.menuMap[key].forEach(item => {
        if (item.name === '通知公告') {
          item.children.forEach(i => {
            if (i.name === '待发布') {
              this.showGgsz = true
            }
          })
        }
      })
    })
    // this.getToolsByUser()
    this.getHomePageToolsList()
    this.getProjectByToDo()
    this.getHomePageNoticeList()
    this.getProjectByCollect()
    // canvasBg('canvas-home')
  },
  computed: {
    ...mapState({
      menuMap: state => state.permission.menuMap
    })
  },
  methods: {
    goUrl (data) {
      if (data.name === '省域2.0') {
        window.open(window.config.VUE_APP_SY2)
      } else if (data.name === '国基平台') {
        window.open(window.config.VUE_APP_GJPT)
      } else if (data.name === '行政审批') {
        window.open(window.config.VUE_APP_XZSP)
      } else if (data.name === '投资在线3.0') {
        window.open(window.config.VUE_APP_TZXMZX3_SP)
      }
    },
    getState (state) {
      return warn.getWarnState(state)
    },
    getHomePageNoticeList () {
      homePageService.getHomePageNoticeList({
        userId: this.userInfo.id
      }).then(d => {
        this.noticeList = d
      })
    },
    async jumpNoticeDetail (item) {
      homePageService.setNoticeState({
        noticeId: item.id,
        userId: this.userInfo.id
      }).then(resp => {
        this.$router.push({
          name: 'noticeInfo',
          query: {
            id: item.id
          }
        })
      })
    },
    async jumpDetail (item, type) {
      type = type || '在办箱'
      this.owner = btnEvent.createProcessor(this)
      this.owner.rowData = item
      const widgets = await widgetService.listCustomWidgetWithOutBtnByAPPNames('规划许可')
      console.log(widgets)
      widgets['规划许可'].forEach(item => {
        if (item.name === type) {
          widgetService.listCustomWidgetBtnByParentId(item.id).then((d) => {
            d.forEach(btn => {
              if (btn.name === '双击') {
                widgetService.getCustomWidgetById(btn.usedWidgetId).then((d) => {
                  const param = this.getRouterParam(d.routerParam, this.owner)
                  if (d.desc === 'edit') {
                    param.isEdit = true// 表单可编辑
                  }
                  if (this.owner.rowData.taskId) {
                    this.enterDetail(d.routerName, param, { taskId: this.owner.rowData.taskId })
                  } else {
                    this.enterDetail(d.routerName, param)
                  }
                })
              }
            })
          })
        }
      })
    },
    enterDetail (routerName, params, query) {
      const { href } = this.$router.resolve({
        name: routerName,
        params: params,
        query
      })
      window.open(href, '_blank')
    },
    getRouterParam (routerParam, owner) {
      const arr = routerParam.split('/:')
      const param = {}
      if (arr.length > 1) {
        arr.forEach((item, index) => {
          if (index > 0) {
            param[item] = owner.rowData[item] || owner.rowData[item.toUpperCase()] || 0
          }
        })
      }
      return param
    },
    goToBox (boxName) {
      pushByWidgetName(boxName, this, {}, '规划许可')
    },
    getProjectByToDo () {
      const sqlParam = {
        sqlConfigName: 'getCooperateApproveTodoBox',
        params: {
          businessFilter: '用途管制',
          userId: this.userInfo.id
        }
      }
      sqlService.pageQuery(sqlParam).then((d) => {
        var data = [...d.rows]
        var total = d.rows.length

        data.forEach(item => {
          var state = warn.checkWarning(item.flowLimitTime, item.taskLimitTime)
          item.warnState = warn.getWarnState(state)

          if (item.warnState === '预警' || item.warnState === '超期') {
            this.warnList.rows.push(item)
          }

          if (item.NUM > 0) {
            this.superviseList.rows.push(item)
          }
        })

        // 待办
        if (data.length > 9) {
          this.toDoList.rows = data.slice(0, 9)
          this.toDoList.total = total
        }

        // 预警
        this.warnList.total = this.warnList.rows.length

        if (this.warnList.rows.length > 9) {
          this.warnList.rows = [...this.warnList.rows.slice(0, 9)]
        }

        // 督办
        this.superviseList.total = this.superviseList.rows.length

        if (this.superviseList.rows.length > 9) {
          this.superviseList.rows = [...this.superviseList.rows.slice(0, 9)]
        }
      })
    },
    getProjectByCollect () {
      const sqlParam = {
        sqlConfigName: 'getCooperateApproveCollectBox',
        pageIndex: 1,
        pageSize: 5,
        params: {
          businessFilter: '用途管制',
          userId: this.userInfo.id
        }
      }
      sqlService.pageQuery(sqlParam).then((d) => {
        var data = [...d.rows]
        var total = d.rows.length
        this.collectedProject.rows = data
        this.collectedProject.total = total
      })
    },
    getWarnBoxClass (state) {
      if (state === '正常') {
        return 'normal'
      } else if (state === '预警') {
        return 'warn'
      } else {
        return 'timeout'
      }
    },
    toChangeItem (item) {
      if (item === 'yj') {
        this.changeItem = 'yj'
      } else if (item === 'daiban') {
        this.changeItem = 'daiban'
      } else if (item === 'duban') {
        this.changeItem = 'duban'
      }
    },
    addModel (id) {
      console.log('输出id', id)
      console.log('输出这个数组的checkbox的状态', this.quickPathList)
      console.log('拼接路径', this.addPathId)
    },
    onChange (checkedValues) {
      console.log('checked = ', checkedValues)
    },
    handleOkAddTools () {
      const toolModel = []
      for (let index = 0; index < this.smartToolsList.length; index++) {
        if (this.smartToolsList[index].checked) {
          toolModel.push(this.smartToolsList[index].id)
        }
      }
      if (toolModel.length > 5) {
        return this.$message.warning('最多勾选五个')
      }
      this.requestAddModel.smartTools = toolModel.join(',')
      homePageService.setHomePageToolsList('', this.requestAddModel).then(d => {
        // this.getToolsByUser()
        this.getHomePageToolsList()
        this.moretoolVisible = false
        this.$message.success('设置成功')
      })
    },
    handleOkAddPaths () {
      const pathModel = []

      for (let index = 0; index < this.quickPathList.length; index++) {
        if (this.quickPathList[index].checked) {
          pathModel.push(this.quickPathList[index].id)
        }
      }
      if (pathModel.length > 5) {
        return this.$message.warning('最多勾选五个')
      }
      this.requestAddModel.shortcut = pathModel.join(',')
      homePageService.setHomePageToolsList('', this.requestAddModel).then(d => {
        // this.getToolsByUser()
        this.getHomePageToolsList()
        this.morepathVisible = false
        this.$message.success('设置成功')
      })
    },
    handleCancelAddPaths () {
      this.morepathVisible = false
    },
    handleCancelAdd () {
      this.moretoolVisible = false
    },
    getMoreSmartTool () {
      this.moretoolVisible = true
    },
    getMoreQuickPath () {
      this.morepathVisible = true
    },
    getToolsByUser () {
      homePageService.getToolsByUser().then(d => {
        this.haveSmartToolsList = d.smartTools
        this.haveQuickPathList = d.shortcut
        if (this.haveSmartToolsList.length > 5) {
          this.haveSmartToolsList = this.haveSmartToolsList.slice(0, 5)
        }
        if (this.haveQuickPathList.length > 5) {
          this.haveQuickPathList = this.haveQuickPathList.slice(0, 5)
        }
      })
    },
    getHomePageToolsList () {
      this.haveSmartToolsList = []
      this.haveQuickPathList = []
      var toolModel = []
      var pathModel = []
      homePageService.getHomePageToolsList().then(d => {
        for (let index = 0; index < d.smartTools.length; index++) {
          d.smartTools[index].checked = d.smartTools[index].state !== 0
          if (d.smartTools[index].checked) {
            this.haveSmartToolsList.push(d.smartTools[index])
            toolModel.push(d.smartTools[index].id)
          }
        }
        for (let index = 0; index < d.shortcut.length; index++) {
          d.shortcut[index].checked = d.shortcut[index].state !== 0
          if (d.shortcut[index].checked) {
            this.haveQuickPathList.push(d.shortcut[index])
            pathModel.push(d.shortcut[index].id)
          }
        }
        this.requestAddModel.smartTools = toolModel.join(',')
        this.requestAddModel.shortcut = pathModel.join(',')
        console.log('路径数据===》', d.shortcut)
        this.smartToolsList = d.smartTools
        this.quickPathList = d.shortcut
      })
    },
    goto (type) {
      if (type === 'none') {
        this.$message.warning('该模块正在建设中，请等待上线后再使用。')
        return
      }
      const model = this.handMenuMap[type]
      if (!model) {
        this.$message.warning('您没有进入该模块的权限，请联系管理员开通！')
        return
      }
      if (model.routerName) {
        if (model.children && model.name === '规划许可') {
          model.children.forEach(item => {
            if (item.name.indexOf('在办') > -1) {
              this.$router.push({ name: item.routerName })
            }
          })
          // pushByWidgetName('待办件', this)
        } else {
          // pushByWidgetName('1', this)
          this.$router.push({ name: model.routerName })
        }
      } else if (model.url) {
        window.open(model.url)
      }
    },
    createHandMenuMap () {
      console.log('menuMap', this.menuMap)
      Object.keys(this.menuMap).map(key => {
        this.menuMap[key].forEach(item => {
          if (relation[item.name]) {
            this.handMenuMap[relation[item.name]] = item
          }
        })
      })
      console.log(this.handMenuMap)
    },
    openToools (tool) {
      let url = ''
      switch (tool.name) {
        case '三维审查': {
          url = window.config.VUE_APP_3DMap_shencha
          break
        }
        case '方案比选': {
          url = window.config.VUE_APP_fabx
          break
        }
      }
      window.open(url)
    }
  }
}
</script>

<style lang="less" scoped>
.home-page {
  display: flex;
  flex-direction: column;

  .p-r-badge{
    padding-right: 55px;
  }
  .home-header {
    color: #ffffff;
    background: linear-gradient(90.45deg, #2EAEF5 -3.39%, #05B3CB 94%);
    background-size: 100% 100%;
    height: 80px;
    flex: 1.3;
    display: flex;
    line-height: 80px;

    .left-img {
      padding-left: 31px;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-family: 'Jost';
      font-style: normal;
      font-size: 28px;
      line-height: 40px;
    }

    .qw-search {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-left: 200px;
      flex: 1;
      .icon-sousuo2 {
        width: 26px;
        height: 26px;
        color: #f0f0f0;
        position: relative;
        line-height: 26px;
        left: 34px;
      }

      .search-item {
        border: none;
        width: 410px;
        height: 40px;
        background: rgba(255, 255, 255, 0.20);
        border-radius: 4px;
        box-sizing: border-box;
      }

      .qwss-text {
        cursor: pointer;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
        height: 40px;
        line-height: 40px;
        position: relative;
        right: 90px;
      }
    }

    .personal-setting {
      display: flex;
      flex-direction: row;
      align-items: center;
      text-align: right;
      flex: 1;
      position: relative;

      .right-personal-detail {
        position: absolute;
        padding-right: 30px;
        right: 0;

        .icon-a-224yonghu1 {
          width: 22px;
          height: 22px;
          line-height: 22px;
          margin-right: 4px;
        }

        .personal-data {
          font-size: 16px;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: 500;
          text-align: left;
          color: #ffffff;
          line-height: 24px;
          margin-right: 24px;
        }

        i {
          margin-left: 8px;
          cursor: pointer;
          font-size: 18px;
          line-height: 22px;
        }
      }
    }
  }

  .main-content {
    flex: 15;
    width: 100%;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    z-index: 999;

    .left-content {
      flex: 1;
      margin: 16px;
      display: flex;
      flex-direction: column;

      .top-detail-content {
        width: 100%;
        flex: 4;
        display: flex;
        height: 24%;
        background: #ffffff;
        border: 1px solid #eaeef7;
        flex-direction: column;

        .little-title {
          flex: 1;
          text-align: left;
          .icon-a-juxingfuzhi12beifen2 {
            color: #2BAEF2;
            width: 14px;
            height: 15px;
            line-height: 48px;
            float: left;
          }

          .block-title {
            margin-left: 30px;
            font-size: 18px;
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: 700;
            text-align: left;
            color: #2BAEF2;
            line-height: 48px;
            border-bottom: 1px solid #c7d2e3;
            margin-right: 20px;
          }
        }

        .bottom-detail-content {
          flex: 4;
          display: flex;
          flex-direction: row;
          height: auto;
          justify-content: center;
          align-items: center;

          .project-item {
            flex: 1;
            height: 100%;
            text-align: center;
            display: flex;
            align-items: center;
            flex-direction: column;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            .item {
              width: 60%;
              height: 40%;
              background: #ebf0f6;
              border-radius: 22px;
              margin-bottom: 14px;
              display: flex;
              justify-content: center;
              align-items: center;

              img {
                width: 57%;
                object-fit: contain;
                text-align: center;
              }

              .bottom-tip {
                font-size: 16px;
                font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                font-weight: 400;
                text-align: center;
                color: #333333;
                line-height: 21px;
              }
            }

          }
        }
      }

      .middle-title {
        width: 100%;
        flex: 1;
        position: relative;

        .left-title-item {
          width: 51%;
          position: absolute;
          bottom: 0;
          left: 0;

          .qiehuan {
            font-size: 15px;
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: 700;
            text-align: left;
            color: #ffffff;
            line-height: 36px;
            text-align: center;
            display: inline-block;
            width: 33%;
            height: 100%;
            background: #e4e8ef;
            cursor: pointer;
          }

          .yj-title {
            border-radius: 8px 0px 0px 0px;
          }

          .db-title {
          }

          .dub-title {
            border-radius: 0px 8px 0px 0px;
          }

          .select-active {
            background: #2BAEF2;
          }

        }

        .right-shuaxin {
          display: inline-block;
          position: absolute;
          bottom: 0;
          right: 0;
          font-size: 14px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: center;
          color: #666666;
          line-height: 30px;
          width: auto;
          padding-right: 20px;
          cursor: pointer;
        }
      }

      .bottom-content {
        padding: 16px;
        overflow: auto;
        flex: 12;
        background: #ffffff;
        border: 1px solid #eaeef7;
        display: flex;
        flex-direction: column;
        position: relative;

        .top-tip {
          flex: 1;
          padding: 0 16px;
          width: 100%;
          background: linear-gradient(270deg, rgba(255, 238, 182, 0.15), rgba(253, 195, 76, 0.15));
          font-size: 14px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: left;
          color: #f18f00;
          line-height: 34px;

          .left-tip {
            float: left;
          }

          .right-ckgd {
            float: right;
            cursor: pointer;
          }
        }

        .mian-full-content {
          display: flex;
          flex-wrap: wrap;
          flex: 50;
          overflow-y: auto;

          .left-main-content {
            width: 32%;
            height: 31%;
            background: #f8fafd;
            margin-top: 1%;
            margin-right: 2%;
            font-size: 12px;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #666666;
            line-height: 20px;
            cursor: pointer;

            .title-content {
              height: 50%;
              background: #edf3fd;
              padding: 10px 16px 0px 16px;

              .top {
                height: 22px;

                .top-left {
                  font-size: 14px;
                  font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                  font-weight: 700;
                  text-align: left;
                  color: #2BAEF2;
                  line-height: 22px;
                  width: 80%;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  float: left;
                }

                .top-right {
                  width: 38px;
                  height: 21px;
                  border-radius: 2px;
                  font-size: 12px;
                  font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                  font-weight: 700;
                  text-align: left;
                  color: #ffffff;
                  line-height: 21px;
                  float: right;
                  text-align: center;
                }
              }

              .title-header {
                font-size: 14px;
                font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                font-weight: 700;
                text-align: justify;
                color: #333333;
                line-height: 22px;
                word-break: break-all;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
              }
            }

            .detail-time {
              margin-top: 12px;
            }

            .time {
              margin-left: 16px;
              margin-top: 4px;

              div {
                display: inline-block;
                margin-right: 7px;
                width: 6px;
                height: 6px;
                background: #c4cede;
                border-radius: 50%;
              }
            }
          }

          .left-main-content:nth-child(3n) {
            margin-right: 0px;
          }
        }
      }
    }

    .right-content {
      flex: 1;
      margin: 16px;
      margin-left: 0;
      flex-wrap: wrap;
      justify-content: center;
      display: flex;
      align-content: space-between;

      .item-content {
        overflow: hidden;
        width: 59%;
        height: 49%;
        margin-right: 2%;
        background: #ffffff;
        position: relative;

        .zngj-header {
          flex: 1;
          text-align: left;

          .icon-a-juxingfuzhi12beifen2 {
            color: #2BAEF2;
            width: 14px;
            height: 15px;
            line-height: 48px;
            float: left;
          }

          .block-title {
            margin-left: 30px;
            font-size: 18px;
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: 700;
            text-align: left;
            color: #2BAEF2;
            line-height: 48px;
            border-bottom: 1px solid #c7d2e3;
            margin-right: 20px;

            .right-gdgj {
              float: right;
              font-size: 14px;
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              font-weight: 400;
              text-align: right;
              color: #666666;
              line-height: 48px;
            }
          }
        }

        .zngj-content {
          display: flex;
          flex-wrap: wrap;
          height: 87.6%;
          margin: 0 20px;
          justify-content: center;

          .zngj-item {
            width: 50%;
            flex-direction: column;
            justify-content: center;
            display: flex;
            align-content: space-between;
            //border: 1px solid #990055;
            text-align: center;
            cursor: pointer;

            img {
              margin: 0 auto;
              width: 50%;
              object-fit: contain;
            }
          }
        }

        .wdtj-header {
          flex: 1;
          //height: 48px;
          text-align: left;
          //margin-left: 0;
          .icon-a-juxingfuzhi12beifen2 {
            color: #2BAEF2;
            width: 14px;
            height: 15px;
            line-height: 48px;
            float: left;
          }

          .block-title {
            margin-left: 30px;
            font-size: 18px;
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: 700;
            text-align: left;
            color: #2BAEF2;
            line-height: 48px;
            border-bottom: 1px solid #c7d2e3;
            margin-right: 20px;

            .top{
              display: flex;
              justify-content: space-between;
              align-items: center;
            }

            .right-pager {
              width: 100%;
              float: right;
              font-size: 14px;
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              font-weight: 400;
              text-align: right;
              color: #666666;
              line-height: 48px;
              i{
                cursor: pointer;
              }
              img{
                width: 20px;
                height: 20px;
              }
            }
            .right-gdgg {
              float: right;
              font-size: 14px;
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              font-weight: 400;
              text-align: right;
              color: #666666;
              line-height: 48px;
              cursor: pointer;
            }
          }
        }

        .columnar {
          height: 80%;
          margin-top: 10%;
          width: 100%;

          div {
            width: 100%;

            canvas {
              width: 100%;
            }
          }
        }

        /deep/ .ant-carousel .slick-slider {
          height: 160px;
          overflow: hidden;
        }

        .echart-arrow {
          position: relative;
          top: -16%;
          color: #666666;
        }

        .icon-a-bianzu43beifen {
          right: 38%;
        }

        .icon-a-bianzu43 {
          left: 38%;
        }

        .wdgz-header {
          flex: 1;
          text-align: left;
          .icon-a-juxingfuzhi12beifen2 {
            color: #2BAEF2;
            width: 14px;
            height: 15px;
            line-height: 48px;
            float: left;
          }

          .block-title {
            margin-left: 30px;
            font-size: 18px;
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: 700;
            text-align: left;
            color: #2BAEF2;
            line-height: 48px;
            border-bottom: 1px solid #c7d2e3;
            margin-right: 20px;

            .right-gdxm {
              float: right;
              font-size: 14px;
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              font-weight: 400;
              text-align: right;
              color: #666666;
              line-height: 48px;
              cursor: pointer;
            }
          }
        }

        .wdgz-content {
          width: 100%;
          padding: 10px 20px;

          .progress-item {
            text-align: left;
            margin-top: 3%;
            height: 16.66%;
            cursor: pointer;

            span {
              font-size: 14px;
              font-family: Microsoft YaHei, Microsoft YaHei-Bold;
              font-weight: 700;
              text-align: left;
              color: #333333;
              line-height: 22px;
            }

            /deep/ .ant-progress {
              margin-top: 1%;
            }
          }

          .step-item {
            width: 87%;
            height: 8%;
            margin-left: 6%;
            margin-top: 3%;
            text-align: center;

            .yuanquan {
              width: 12px;
              height: 12px;
              background: rgba(88, 169, 253, 0.20);
              border: 2px solid #58a9fd;
              border-radius: 50%;
              display: inline-block;
            }

            .xuxian {
              border-style: dotted;
              width: 20%;
              height: 2px;
              border: 1px dashed #a1aec4;
              border-bottom: none;
              border-left: none;
              border-right: none;
              display: inline-block;
              position: relative;
              top: -5px;
            }
          }

          .text-shuoming {
            display: flex;
            height: 8%;

            .text {
              flex: 1;
              font-size: 14px;
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              font-weight: 400;
              text-align: center;
              color: #666666;
              line-height: 22px;
            }
          }
        }

        .kjtd-header {
          flex: 1;
          text-align: left;
          .icon-a-juxingfuzhi12beifen2 {
            color: #2BAEF2;
            width: 14px;
            height: 15px;
            line-height: 48px;
            float: left;
          }

          .block-title {
            margin-left: 30px;
            font-size: 18px;
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: 700;
            text-align: left;
            color: #2BAEF2;
            line-height: 48px;
            border-bottom: 1px solid #c7d2e3;
            margin-right: 20px;
          }
        }

        .kjtd-content {
          height: 80%;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          margin: 30px 20px;

          .kjtd-item {
            width: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: justify;
            font-size: 16px;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #333333;
            cursor: pointer;

            img {
              margin-bottom: 10px;
            }
          }

          .kjtd-item:nth-child(2n) {
            margin-right: 0;
          }
        }
      }

      .item-content:nth-child(n+3) {
        margin-bottom: 0;
      }

      .item-content:nth-child(2n) {
        width: 39%;
        margin-right: 0;
      }
    }
  }
}

.btn-sw {
  margin-bottom: 20px;
}

/deep/ .ant-steps-item-process .ant-steps-item-icon {
  background: transparent;
}

/deep/ .ant-modal-body {
  padding: 0;

  .detail-tools {
    display: flex;
    flex-wrap: wrap;
    background-color: #f0f0f0;
    width: 100%;
    height: 100%;

    .moreToolsContianer {
      width: 18% !important;
      margin: 1%;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-color: #fff;
      position: relative;
      border-radius: 5%;

      imtop-headerg {
        width: 30%;
        object-fit: contain;
        margin-bottom: 5px;
      }

      input {
        position: absolute;
        top: 3px;
        right: 3px;
        width: 17px;
        height: 17px;
      }
    }
  }
}

.normal {
  background-color: #4ebf7e;
}

.warn {
  background-color: #ffc953;
}

.timeout {
  background-color: #ea6d48;
}

/deep/ canvas {
  width: 100%;
  height: 100%;
}

/deep/ .ant-list-item-meta-description {
  width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  margin-left: 3%;
  color: #2c3e50;
}

/deep/ .ant-list-item {
  cursor: pointer;
  &:hover {
    /deep/ .ant-list-item-meta-description {
      color: #2BAEF2 !important;
    }
  }
}

</style>
